<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fn1()">get 无参</button>
    <button onclick="fn2()">get 有参</button>
    <button onclick="fn3()">post 无参</button>
    <button onclick="fn4()">post 有参</button>
    <button onclick="fn5()">$get 无参</button>
    <button onclick="fn6()">$get 有参</button>
    <button onclick="fn7()">$post 无参</button>
    <button onclick="fn8()">$post 有参</button>
    <p id="info"></p>
</body>
<script src="./js/jquery-3.4.1.min.js"></script>
<script>
    // xhr  XMLHttpRequest

    function fn1(){
        // alert('fn1')
        let xhr = null
        if(window.XMLHttpRequest){
            // 1. 创建xhr 对象
            xhr = new XMLHttpRequest()
        }else{
            // 兼容 ie5,6
            xhr = new ActiveXObject('Microsoft XMLHttp')
        }
        // 2. open
        xhr.open('get','http://127.0.0.1:3000/gettime',true)
        // 3.发送请求
        xhr.send()
        // 4. 接受响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);  
            }
        }
    }
    // get 有参
    function fn2(){
        // alert('fn1')
        let xhr = null
        if(window.XMLHttpRequest){
            // 1. 创建xhr 对象
            xhr = new XMLHttpRequest()
        }else{
            // 兼容 ie5,6
            xhr = new ActiveXObject('Microsoft XMLHttp')
        }
        // 2. open
        xhr.open('get','http://127.0.0.1:3000/getstudent?id=1',true)
        // 3.发送请求
       
        xhr.send()
        // 4. 接受响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);  
                let stuObj = JSON.parse(xhr.responseText)
                let name = stuObj.result.stu.name
                let age = stuObj.result.stu.age
                let gender = stuObj.result.stu.gender==1?'男':'女'
                document.querySelector('#info').innerHTML= name+'='+age+'='+gender
            }
        }
    }
    // post 无参
    function fn3(){
        // alert('fn1')
        let xhr = null
        if(window.XMLHttpRequest){
            // 1. 创建xhr 对象
            xhr = new XMLHttpRequest()
        }else{
            // 兼容 ie5,6
            xhr = new ActiveXObject('Microsoft XMLHttp')
        }
        // 2. open
        xhr.open('post','http://127.0.0.1:3000/gettime',true)
        // 3.发送请求
       
        xhr.send()
        // 4. 接受响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);  
                
                document.querySelector('#info').innerHTML= xhr.responseText
            }
        }
    }
    // post 有参
    function fn4(){
        // alert('fn1')
        let xhr = null
        if(window.XMLHttpRequest){
            // 1. 创建xhr 对象
            xhr = new XMLHttpRequest()
        }else{
            // 兼容 ie5,6
            xhr = new ActiveXObject('Microsoft XMLHttp')
        }
        // 2. open
        xhr.open('post','http://127.0.0.1:3000/getstudent',true)
        // 3.发送请求
        let obj = {
            id:1
        }
        // 设置请求头
        xhr.setRequestHeader('Content-type','application/json')
        xhr.send(JSON.stringify(obj))
        // 4. 接受响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);  
                
                document.querySelector('#info').innerHTML= xhr.responseText
            }
        }
    }

    function fn5(){
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:3000/gettime",
            dataType: "json",
            success: function (response) {
                console.log(response);
                document.querySelector('#info').innerHTML=response.result.time
            },
            error:function(code,err){
                console.log(code,err);
            }
        });
    }
    function fn6(){
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:3000/getstudent",
            data:{
                id:3
            },
            dataType: "json",
            success: function (response) {
                console.log(response);
                // document.querySelector('#info').innerHTML=response.result.time
            },
            error:function(code,err){
                console.log(code,err);
            }
        });
    }
    function fn7(){
        $.ajax({
            type: "post",
            url: "http://127.0.0.1:3000/gettime",
          
            dataType: "json",
            success: function (response) {
                console.log(response);
                // document.querySelector('#info').innerHTML=response.result.time
            },
            error:function(code,err){
                console.log(code,err);
            }
        });
    }
    function fn8(){
        $.ajax({
            type: "post",
            url: "http://127.0.0.1:3000/getstudent",
            data:{
                id:5
            },
            dataType: "json",
            success: function (response) {
                console.log(response);
                // document.querySelector('#info').innerHTML=response.result.time
            },
            error:function(code,err){
                console.log(code,err);
            }
        });
    }

</script>
</html>